<template>
  <div class="company-radar-wrap">
    <div>
      <el-echarts :width="270" :height="200" :option="options"></el-echarts>
    </div>
    <div class="compnay-radar-mask"></div>
    <div class="company-radar-btn">
      <button type="button" class="btn btn-primary btn-sm" @click="onDownloadReport">
        下载信用报告
      </button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      options: {
        title: {
          text: '',
        },
        radar: {
          radius: '70%',
          indicator: [
            { name: '基本信息', max: 6500 },
            { name: '信用信息', max: 16000 },
            { name: '经营信息', max: 30000 },
            { name: '关联信息', max: 38000 },
            { name: '舆情信息', max: 52000 },
            { name: '资产信息', max: 25000 },
          ],
        },
        series: [
          {
            name: '雷达图',
            type: 'radar',
            data: [
              {
                value: [4200, 9000, 20000, 35000, 50000, 18000],
                name: '基础能力',
              },
            ],
          },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onDownloadReport() {
      this.$message.error('信用报告未生成')
    },
  },
}
</script>

<style lang="scss" scoped>
.company-radar-wrap {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.compnay-radar-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 50%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.company-radar-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
</style>
